import { useState, useEffect } from "react";
import "./index.less";
import addUser from "../../../assets/icon/add-user.png";
import addGroup from "../../../assets/icon/add-group.png";
import { request } from "../../../common/request";
import { urls } from "../../../common/urls";

// 1用户 2客服 3官方
const roleObj: any = {
  "2": "客服",
  "3": "官方",
};

function BookList(props: any) {
  const { setContent } = props;
  const [active, setActive] = useState("");
  const [type, setType] = useState("");
  const [userList, setUserList] = useState([]);
  const [groupList, setGroupList] = useState([]);
  const [myGroupList, setMyGroupList] = useState([]);
  const operateBtn = [
    {
      name: "添加好友",
      icon: addUser,
      type: "addUser",
    },
    {
      name: "创建群聊",
      icon: addGroup,
      type: "addGroup",
    },
  ];
  const handleChangeBook = (aid: string, type: string, id: string) => {
    setActive(aid);
    console.log(type, id, myGroupList);
    setContent({ type, id });
  };
  // 群聊
  const getGrouptList = () => {
    request({
      method: "post",
      data: {
        method: urls.groupList,
        page: 1,
      },
    }).then((res: any) => {
      const list: any = res.data.data;
      const groupList = list.map((x: any) => {
        return {
          ...x,
          type: "group",
        };
      });
      setGroupList(groupList);
    });
  };
  // 我创建的群聊
  const getMyGrouptList = () => {
    request({
      method: "post",
      data: {
        method: urls.myGroupList,
        page: 1,
      },
    }).then((res: any) => {
      const list: any = res.data.data;
      const myGroupList = list.map((x: any) => {
        return {
          ...x,
          type: "group",
        };
      });
      setMyGroupList(myGroupList);
    });
  };
  // 好友列表
  const getUsetList = () => {
    request({
      method: "post",
      data: {
        method: urls.userList,
      },
    }).then((res: any) => {
      const list = res.data;
      const userList = list.map((x: any, i: number) => {
        return {
          ...x,
          type: "user",
        };
      });
      setUserList(userList);
    });
  };

  useEffect(() => {
    setContent({ type });
  }, [type])


  useEffect(() => {
    getMyGrouptList();
    getGrouptList();
    getUsetList();
  }, []);

  return (
    <>
      <div className="book-list">
        {/* title */}
        <div className="book-list-title title-content">
          <div className="book-list-title-name">
            <p>通讯录</p>
          </div>
          <div className="book-list-title-group" onClick={() => setContent({ type: 'groupOperate' })}>
            <div className="book-list-title-group-img"></div>
            <p>分组管理</p>
          </div>
        </div>
        {/* list */}
        {/* operate */}
        <div className="book-operate-group">
          {operateBtn?.map((x, i) => {
            return (
              <div
                className="book-card"
                key={i}
                onClick={() => setType(x.type)}
              >
                <img className="avatar" src={x.icon} alt="" />
                <p className="name">{x.name}</p>
              </div>
            );
          })}
        </div>
        <div className="book-content-group">
          {/* my group */}
          {myGroupList.length > 0 && (
            <div className="book-card-group">
              <p className="group-title">群聊</p>
              {myGroupList?.map((m: any) => {
                return (
                  <div
                    className="book-card"
                    style={{
                      backgroundColor: `${active === `${m.id}-${m.type}` ? "#E5E5E5" : "transparent"
                        }`,
                    }}
                    key={m.id}
                    onClick={() =>
                      handleChangeBook(`${m.id}-${m.type}`, m.type, m.group_id)
                    }
                  >
                    <img className="avatar" src={m.logo} alt="" />
                    <p className="name">{m.name}</p>
                  </div>
                );
              })}
            </div>
          )}
          {/* group */}
          {groupList.length > 0 && (
            <div className="book-card-group">
              <p className="group-title">群聊</p>
              {groupList?.map((m: any) => {
                return (
                  <div
                    className="book-card"
                    style={{
                      backgroundColor: `${active === `${m.f_uid}-${m.type}`
                          ? "#E5E5E5"
                          : "transparent"
                        }`,
                    }}
                    key={m.f_uid}
                    onClick={() =>
                      handleChangeBook(`${m.f_uid}-${m.type}`, m.type, m.f_uid)
                    }
                  >
                    <img className="avatar" src={m.logo} alt="" />
                    <p className="name">{m.name}</p>
                  </div>
                );
              })}
            </div>
          )}
          {/* user */}
          {userList?.map((x: any, i) => {
            return (
              <div className="book-card-group" key={x.group_id}>
                <p className="group-title">{x.group_name}</p>
                {x.child &&
                  x.child?.map((m: any) => {
                    return (
                      <div
                        className="book-card"
                        style={{
                          backgroundColor: `${active === `${m.f_uid}-${x.type}`
                              ? "#E5E5E5"
                              : "transparent"
                            }`,
                        }}
                        key={`${m.f_uid}-${x.type}`}
                        onClick={() =>
                          handleChangeBook(
                            `${m.f_uid}-${x.type}`,
                            x.type,
                            m.f_uid
                          )
                        }
                      >
                        <img className="avatar" src={m.f_avatar} alt="" />
                        <p className="name">{m.comment_name || m.f_username}</p>
                        {(() => {
                          if (m.f_role > 1) {
                            return <p className="tag">{roleObj[m.f_role]}</p>;
                          }
                        })()}
                      </div>
                    );
                  })}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

export default BookList;
